import { useRef } from "react";
import { ContextProvider } from "./context";
import Panel from "./components/Panel";
import Stage from "./components/Stage";
import Snake from "./components/Snake";
import Food from "./components/Food";
import Operate from "./components/Operate";
import "./App.css";

function App() {
  const snakeRef = useRef<RefInterface>(null);
  const foodRef = useRef<RefInterface>(null);
  const refValue = { snakeRef, foodRef };

  return (
    <ContextProvider refValue={refValue}>
      <Panel />
      <Stage>
        <Snake ref={snakeRef} />
        <Food ref={foodRef} />
      </Stage>
      <Operate />
    </ContextProvider>
  );
}

export default App;
